@import "../styles/animation.scss";

.new-chat-start{
    height: 100%;
    width: 100%;
    position: relative;
    /* 正确的渐变语法 */
    background: linear-gradient(0deg, rgba(211, 243, 241, 1), rgba(241, 246, 255, 1));
    
    /* 如果渐变不工作，提供回退颜色 */
    background-color: rgb(9, 230, 215); /* 回退到起始颜色 */

    .start-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 34px;

        .start-container-header {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 27px;

            .start-container-header-img {
                background-color: #fff;
            }

            .start-container-header-title {
                font-weight: 600;
                font-size: 48px;
                color: #707070;
                line-height: 66px;
                font-style: normal;
                text-transform: none;
            }
        }

        .start-container-body {
            box-sizing: border-box;
            width: 70%;

            .chat-input-panel {
                position: relative;
                .chat-input{
                    height: 100%;
                    width: 100%;
                    border-radius: 40px;
                    border: 2px solid transparent;
                    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
                    background-color: var(--white);
                    color: var(--black);
                    font-family: inherit;
                    padding: 30px 50px 10px 50px;
                    resize: none;
                    outline: none;
                    box-sizing: border-box;
                    min-height: 170px;

                    &:focus {
                        border: 2px solid var(--primary);
                    }
                }

                .chat-input-send-text{
                    position: absolute;
                    right: 30px;
                    bottom: 20px;
                    border-radius: 40px;
                    width: 50px;
                    height: 50px;
                }

                .chat-input-send-file{
                    position: absolute;
                    left: 35px;
                    bottom: 20px;
                    border-radius: 40px;
                    width: 50px;
                    height: 50px;
                }

                .chat-input-send-deep{
                    position: absolute;
                    left: 105px;
                    bottom: 20px;
                    border-radius: 40px;
                    border: 1px solid #3B928E;
                    color: #3f918d;
                    line-height: 34px;
                    font-style: normal;
                    text-transform: none;
                    font-weight: 600;
                    font-size: 16px;
                    height: 50px;
                    background-color: rgba(233, 250, 239, 1);
                }

                .chat-input-send-voice {
                    position: absolute;
                    right: 105px;
                    bottom: 20px;
                    border-radius: 40px;
                    width: 50px;
                    height: 50px;
                }
            }

            .start-container-panel {
                position: relative;
                width: 100%;

                .start-container-panel-question{
                    position: absolute;
                    left: 0;
                    top: 6px;
                    font-weight: 600;
                    font-size: 16px;
                    color: #707070;
                    line-height: 34px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }
}

.card-list{
    padding: 10px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    
    .card-list-item {
        padding: 18px 24px;
        border-radius: 30px 30px 30px 30px;
        border: 2px solid #D0D0D0;

        
        .card-list-item-title {
            font-weight: 600;
            font-size: 20px;
            color: #000000;
            line-height: 36px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        
        .card-list-item-sub-title {
            font-weight: 600;
            font-size: 16px;
            color: #707070;
            line-height: 31px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        &:hover {
            border: 2px solid var(--primary);
            cursor: pointer;
        }
    }
}

